import AceEditor from 'react-ace';

import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-github';
import { forwardRef, useImperativeHandle } from 'react';
import styles from './index.less';
function onChange() {
  // console.log('change', newValue);
}

// Render editor

const Index = forwardRef((props: any, ref) => {
  const { codeRef, ...rest } = props;
  useImperativeHandle(ref, () => ({}));
  return (
    <div className={styles.code}>
      <AceEditor
        mode="javascript"
        theme="github"
        height="300px"
        width="100%"
        placeholder="请输入代码"
        onChange={onChange}
        name="UNIQUE_ID_OF_DIV"
        highlightActiveLine={false}
        editorProps={{ $blockScrolling: true }}
        // render={(props: any) => {
        //   return <div style={{ height: '100px', width: '200px' }} {...props} />;
        // }}
        codeRef={codeRef}
        {...rest}
      />
    </div>
  );
});
export default Index;
